<template>
    <div class="dashboard-container">
        <el-card class="welcome-card">
            <div class="welcome-content">
                <el-icon class="welcome-icon"><HomeFilled /></el-icon>
                <h1>欢迎使用中医智诊后台管理系统</h1>
                <p class="user-welcome">{{ welcomeMessage }}</p>
                <p class="time-info">现在是：{{ currentTime }}</p>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { HomeFilled } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/user'

const currentTime = ref('')
const welcomeMessage = ref('')
let timer

// 获取欢迎语
const getWelcomeMessage = () => {
    const hour = new Date().getHours()
    const userInfo = useUserStore().userInfo
    const name = userInfo.nickname || userInfo.username || '管理员'
    
    let timeText = ''
    if (hour < 6) {
        timeText = '凌晨好'
    } else if (hour < 9) {
        timeText = '早上好'
    } else if (hour < 12) {
        timeText = '上午好'
    } else if (hour < 14) {
        timeText = '中午好'
    } else if (hour < 17) {
        timeText = '下午好'
    } else if (hour < 19) {
        timeText = '傍晚好'
    } else {
        timeText = '晚上好'
    }
    
    welcomeMessage.value = `${timeText}，${name}！`
}

// 更新当前时间
const updateTime = () => {
    const now = new Date()
    const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    }
    currentTime.value = now.toLocaleDateString('zh-CN', options)
}

onMounted(() => {
    getWelcomeMessage()
    updateTime()
    // 每秒更新时间
    timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
    // 清除定时器
    if (timer) {
        clearInterval(timer)
    }
})
</script>

<style scoped>
.dashboard-container {
    padding: 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

.welcome-card {
    width: 100%;
    max-width: 800px;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.welcome-content {
    padding: 40px 20px;
}

.welcome-icon {
    font-size: 48px;
    color: #409EFF;
    margin-bottom: 20px;
}

h1 {
    font-size: 28px;
    color: #303133;
    margin: 20px 0;
    font-weight: 500;
}

.user-welcome {
    font-size: 20px;
    color: #409EFF;
    margin: 20px 0;
}

.time-info {
    font-size: 16px;
    color: #606266;
    margin-top: 20px;
}

:deep(.el-card__body) {
    padding: 0;
}
</style>